<template>
  <view class="list">
    <template v-for="(item, i) in tList" :key="item.id">
      <view class="hr"
        v-if="item.attr.hr">
      </view>
      <question class="item"
        :class="item.attr.class"
        :disabled="disabled" :item="item" :i="i" :start="start" :cWidth="cWidth" :tWidth="tWidth"
        :max="max ? max : tList.length" @change="onChange" />
    </template>
  </view>
</template>

<script lang="ts">
  import { nextTick } from 'vue'
  import Question from './question.vue'
  export default {
    props: {
      disabled: {
        default: false
      },
      start: {
        default: 0
      },
      max: {
        default: 0
      },
      List: {
        default: () => {
          return []
        }
      },
      cWidth: {
        default: () => {
          return uni.upx2px(750 - 64)
        }
      }
    },
    components: {
      Question
    },
    watch: {
      List: {
        handler(val) {
          this.tList = val.filter((v) => {
            if (v.exc && Object.prototype.hasOwnProperty.call(v.exc, 'show') && !v.exc.show) {
              return false
            }
            return true
          })
        },
        immediate: true
      }
    },
    data() {
      return {
        tList: []
      }
    },
    computed: {
      tWidth() {
        return (this.cWidth - uni.upx2px(20)) / 2
      }
    },
    methods: {
      onChange() {
        this.$emit('change')
      },
      async findSubTitle() {
        const sub = this.tList.filter(v => {
          return v.exc.subTitle
        })

        if (!sub.length) {
          return []
        }

        const first = await this.select(this.tList[0].id)
        const delay = first.top

        const tabs = []
        for (const item of sub) {
          const obj = {}
          obj['name'] = item.exc.subTitle
          await this.select(item.id).then(d => {
            obj['top'] = d.top - delay
          })
          obj['item'] = item
          tabs.push(obj)
        }
        return tabs
      },
      select(text) {
        return new Promise((resolve) => {
          const query = uni.createSelectorQuery().in(this)
          query
            .select('.item >>> #' + text)
            .boundingClientRect((data) => {
              resolve(data)
            })
            .exec()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list {
    display: flex;
    flex-direction: column;
  }

  .item {
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    &:not(:first-child) {
      margin-top: 24rpx;
    }
  }

  .hr {
    margin: 0 32rpx;
    width: calc(100% - 64rpx);
    background-color: #E5E6EB;
    height: 1rpx;
  }

  .hr+.item {
    margin-top: 0rpx !important;
  }
  .before {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .after {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
</style>